<!DOCTYPE html >
<html>
<head>
    <link rel="stylesheet" href="demos.css" type="text/css" media="screen" />

    <script src="../libraries/RGraph.common.core.js" ></script>
    <script src="../libraries/RGraph.scatter.js" ></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <!--[if lt IE 9]><script src="../excanvas/excanvas.js"></script><![endif]-->
    
    <title>A Scatter chart which shows financial information</title>

    
    <meta name="robots" content="noindex,nofollow" />
    <meta name="description" content="A Scatter chart which is showing financial information" />
     

    <script>
        $(document).ready(function ()
        {
            /**
            * Generate the financial data
            */
            var value = 5;
            var data = [];

            for (var i=0; i<365; i+=1) {
                data.push([i,value]);
                value += RGraph.random(-1, 1);
                value = Math.max(0, value)
                value = Math.min(10, value)
            }

            var scatter = new RGraph.Scatter({
                id: 'cvs',
                data: data,
                options: {
                    ymax: 10,
                    xmin: 0,
                    xmax: data.length,
                    labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
                    tickmarks: null,
                    line: {
                        self: true,
                        colors: ['red']
                    },
                    units: {
                        pre: '$'
                    },
                    gutter: {
                        left: 40
                    },
                    title: 'Sample financial data',
                    background: {
                        grid: {
                            color: '#eee',
                            autofit: {
                                numvlines: 64,
                                numhlines: 20
                            }
                        }
                    }
                }
            }).draw()
        })
    </script>
</head>
<body>

    <h1>A Scatter chart which shows financial information</h1>
    
    <p>
        This Scatter chart shows sample fiancial data. It looks like it does because there is many data points.
    </p>

    <canvas id="cvs" width="600" height="200">[No canvas support]</canvas>
    



    <p>        
        <a href="./">&laquo; Back</a>
    </p>

</body>
</html>